<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>编辑角色</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    <form class="layui-form layui-form-pane" action="" lay-filter="myForm">
        <input type="hidden" name="id" id="id" >
        <div class="layui-form-item">
            <label class="layui-form-label required">角色名</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" lay-reqtext="" placeholder="请输入角色名" value=""
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <input type="hidden" id="menuId" name="menuId"  lay-reqtext=""  value="" class="layui-input" >
        </div>
        <div class="layui-form-item">
            <input type="hidden" id="permissionId" name="permissionId"  lay-reqtext=""  value="" class="layui-input" >
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">角色菜单</label>
            <div class="layui-input-block">
                <input type="text" id="menuName" name="menuName" lay-verify="required" lay-reqtext=""  value="" class="layui-input"  readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </form>
</div>
<script src="../../lib/layui/layui.js" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>
<script>
    var result = [];//选择后的角色菜单id
    var resultName = [];//选择后的角色菜单名称
    var permissionList=[];//权限
    var menuList=[];//菜单
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;


        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var str = "确定编辑？";
            layer.confirm(str, {btn: ['确定', '取消'], title: "提示"}, function (index) {
                $.ajax({
                    url: "/channel/sys-role/update",
                    type: "POST",
                    dataType:"json",
                    headers:{'Authorization':'Bearer '+ JSON.parse(localStorage.getItem('userdetail')).token},
                    data:data.field,
                    success: function(data) {
                        layer.msg("编辑成功", {
                            icon: 6,//成功的表情
                            time: 1000 //1秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            var iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                        });
                    },
                    error:function (data) {
                        var iframeIndex = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(iframeIndex);
                    }
                });
            })

            return false;
        });

        $(document).on('click','#menuName',function (obj) {
            var index = layer.open({
                area: ['550px', '530px'],
                title: '请选择角色菜单',
                type: 2,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                content: '/page/role/role-menu.html',
                success: function() {
                    var body = layer.getChildFrame('body', index);
                    body.find("input[name='id']").val( $("#id").val());
                },
                end: function () {//无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。layer.open关闭事件
                    var checkedData = JSON.parse(localStorage.getItem("checkedData"));
                    resourceType(checkedData,"menu");
                    var menuid='';
                    var menuname='';
                    var permissionid='';
                    for(var k in menuList){
                        menuid += menuList[k].id + ",";
                        menuname += menuList[k].title + ",";
                        $("#menuId").val(menuid);
                        $("#menuName").val(menuname);
                    }
                    for(var o in permissionList){
                        permissionid += permissionList[o].id + ",";
                        menuname += permissionList[o].title + ",";
                        $("#permissionId").val(permissionid);
                        $("#menuName").val(menuname);
                    }
                    // //清空选择过的菜单
                    menuList.length=0;
                    permissionList.length=0;
                    localStorage.removeItem("checkedData");
                }
            });

        });
    });

    //区分权限和菜单
    function resourceType(data, Type) {
        for (var i in data) {
            if (data[i].resourceType == Type) {
                var tmp={};
                tmp.id=data[i].id;
                tmp.title=data[i].title;
                menuList.push(tmp);
                resourceType(data[i].children, data[i].resourceType);
            }else{
                var TMP={};
                TMP.id=data[i].id;
                TMP.title=data[i].title;
                permissionList.push(TMP);
            }
        }
    }
    // //递归遍历
    function fn(data, pid) {
        for (var i in data) {
            if (data[i].pid == pid) {
                result.push(data[i].id);
                resultName.push(data[i].title);

                fn(data[i].children, data[i].id);
            }
        }
    }

</script>
</body>
</html>